<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	 
 	<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="js/ext/ext-all.js"></script>
 	<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
 	
	<script type="text/javascript">
		    Ext.require(['*']);
		
		    Ext.onReady(function() {
		
		        Ext.QuickTips.init();
		
		        // NOTE: This is an example showing simple state management. During development,
		        // it is generally best to disable state management as dynamically-generated ids
		        // can change across page loads, leading to unpredictable results.  The developer
		        // should ensure that stable state ids are set for stateful components in real apps.
		        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
				
				var navTree = Ext.create('Ext.data.TreeStore', {
			        root: {
			            text: 'Root Node',
			            expanded: true,
			            children: [
			                {
			                    text: 'Child 1',
			                    leaf: true
			                },
			                {
			                    text: 'Child 2',
			                    leaf: true
			                }
			            ]
			        }
			    });
				
				
		        var viewport = Ext.create('Ext.Viewport', {
		            id: 'border-example',
		            layout: 'border',
		            defaults: {
			            
			            split: true
			        },
		            items: [
			            // create instance immediately
			            Ext.create('Ext.tree.Panel'), {
			                region:'west',
			                id: 'west-panel', // see Ext.getCmp() below
			                title: 'Stock System',
			                xtype: 'treepanel',
						    width: 300,
						    height: 250,
						    expanded: true, 
						    rootVisible: false,
						    root: {
						        text: 'Root',
						        expanded: true,
						        children: [
						            //{ text: '個股資訊'  , leaf: true, id:"test1"},
						            //{ text: '關鍵點資訊', leaf: true, id:"test2"},
						           // { text: '排程管理' ,  leaf: true, id:"test3"}
						           
						           { text: '個股資訊'  , leaf: true, id : "stockInfo.jsp"},
						           { text: '關鍵點資訊',   leaf: true, id : "keyPointInfo.jsp"},
						           { text: '排程管理' ,  leaf: true, id : "schedule.jsp"}
						        ]
						    },
					 
						    listeners: {
							    itemclick : function(view,  record,  item, index, e) {
									$("#frame").attr("src", record.get("id"));
								}
							}
			            },
			            // in this instance the TabPanel is not wrapped by another panel
			            // since no title is needed, this Panel is added directly
			            // as a Container
			            {
			                region: 'center', // a center region is ALWAYS required for border layout
			                deferredRender: false,
			                activeTab: 0,     // first tab initially active
			                title : "  ",
		                    contentEl: 'center1',
		                    autoScroll: true
			            }
			         ]
		         });
	   		 });
	   		 
	   		 
		</script>
	</head>
	<body>
	    <div id="center1" >
	    	<iframe id="frame" width="100%" frameborder="0" src="stockInfo.jsp"  onload="this.height=document.body.scrollHeight-50"></iframe>
	    </div>
	</body>
</html>

